<template>
  <section class="photo-section">
    <div class="photo-all photo-1">
    </div>
    <div class="photo-all photo-2">
    </div>
    <div class="photo-all photo-3">
    </div>
    <div class="photo-all photo-4">
    </div>
  </section>
</template>

<script setup>

</script>

<style scoped>
/*图片展示模块*/

.photo-section{
  width:100%;
  height:39rem;
  margin-top: 2rem;
  position: relative;
}
.photo-all{
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
}
.photo-1{
  width:16.3rem;
  height:14.3rem;
  border-radius: 5px 0px 0px 0px;
}
.photo-2{
  width:16.2rem;
  height:13.2rem;
  top:15rem;
}
.photo-3{
  width:14rem;
  height:28.2rem;
  right:0;
  border-radius: 0px 5px 0px 0px;
}
.photo-4{
  width:31rem;
  height:10.1rem;
  bottom:0rem;
  left:0;
  border-radius: 0px 0px 5px 5px;
}

</style>
